<template>
  <div>
    <div>
      <!--卡片区域-->
      <el-card class="box-card">
        <el-row>
          <el-col :span="4"></el-col>
          <el-col :span="8">
            <h1>文档管理</h1>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </el-card>
    </div>
    <div>
      <el-card class="box-card1">
<!--        操作区域-->
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input placeholder="文档作者" v-model="queryinfo.d_author" clearable>
            </el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-input placeholder="文档名称" v-model="queryinfo.d_name" clearable>
            </el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="queryinfo.d_date"></el-date-picker>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button type="primary" @click="getDocuments()">查询</el-button>
            <el-button @click="restFields()">重置</el-button>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button :type="b_type" @click="opbtn()">{{ this.czText }}</el-button>
          </el-col>
        </el-row>
<!--        批量操作区域-->
        <div class="pl_operation" v-show="isdisplay">
          <span style="margin-right: 200px">已选择</span>
          <el-button type="text" @click="toggleSelection()">清空</el-button>
          <el-button type="text"><b>批量导出</b></el-button>
        </div>
        <!--        文档信息-->
        <el-table :data="documents" style="width: 100%" ref="multipleTable">
          <el-table-column v-if="isdisplay" type="selection" width="55"></el-table-column>
          <el-table-column type="index" width="80" label="序号"></el-table-column>
          <el-table-column prop="author" label="作者" width="180"></el-table-column>
          <el-table-column prop="documents" label="文档名称" width="180"></el-table-column>
          <el-table-column prop="insettime" label="发布时间"></el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button size="mini" round type="primary">查看</el-button>
              <el-button size="mini" round type="primary">导出</el-button>
            </template>
          </el-table-column>
        </el-table>
<!--        分页区域-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.pagenum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryinfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" style="margin-top: 20px" align="center">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      documents: [],
      multipleSelection: [],
      total: 0,
      isdisplay: false,
      czText: '批量操作',
      b_type: 'primary',
      // 获取文档信息参数对象
      queryinfo: {
        d_author: '',
        d_name: '',
        d_date: '',
        // 当前页数
        pagenum: 0,
        // 显示条数
        pagesize: 0
      }
    }
  },
  created () {
    this.getDocuments()
  },
  methods: {
    async getDocuments () {
      if ((this.queryinfo.d_author !== '') || (this.queryinfo.d_name !== '') || (this.queryinfo.d_date !== '')) {
        this.queryinfo.pagenum = 0
      }
      if (this.queryinfo.d_date === null) {
        this.queryinfo.d_date = ''
      }
      const { data: rsp } = await this.$http.get('/file', { params: this.queryinfo })
      if (rsp.status !== 200) return this.$message.error('数据获取失败')
      this.documents = rsp.data
      // this.pagenum = rsp.pagenum
      this.total = rsp.total
      // this.queryinfo.pagenum = 0
      console.log(rsp)
    },
    // 监听pagsize
    handleSizeChange (newSize) {
      this.queryinfo.pagesize = newSize
      this.getDocuments()
    },
    // 监听页码值改变
    handleCurrentChange (newPage) {
      this.queryinfo.pagenum = newPage
      this.getDocuments()
    },
    // 清空选择字段
    restFields () {
      this.queryinfo.d_author = ''
      this.queryinfo.d_date = ''
      this.queryinfo.d_name = ''
    },
    // 批量操作显示
    opbtn () {
      this.isdisplay = !this.isdisplay
      if (this.isdisplay === false) {
        this.czText = '批量操作'
        this.b_type = 'primary'
      } else {
        this.czText = '取消操作'
        this.b_type = 'danger'
      }
    },
    // 清空选择项
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    }
  }
}
</script>

<style scoped>
  .box-card1{
    margin-top: 10px;
  }
  .pl_operation {
    background-color: #E6F7FF;
    height: 40px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius:5px;
    padding: 10px;
  }
</style>
